<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hottest Topic on Reddit</title>
		<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
		<style>
			.submit-sec {
				margin-top: 15px;
			}
			section {
				margin-top: 30px;
			}
			
			.showdata {
				width: 50%;
			}

			.showsearch {
				margin-bottom: 20px;
			}

                        a {
                               color: black;
                               font-weight: 500;
                        }
			
		</style>
  		<script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
	</head>
	<body>
		<div class="container">
			<h1>Hottest Topic on Reddit</h1>
			<h3>Real Time Reddit News Feed Search</h3>
			<section class="showsearch">
                                
				<form action="/show" method="get">
					<div class="form-group">
						<label for="usertimestamp">User name, please:</label>
						<input type="text" class="form-control" name="user" id="usertimestamp">
						<div class="submit-sec">
							<input id="done-btn" type="submit" value="Show me" class="btn btn-primary">
						</div>
					</div>
				</form>
			</section>
<!--
			<section>
				<form action="/graph" method="get">
					<div class="form-group">
						<label for="usergraph">For user relationship graph, Please type your user name:</label>
						<input type="text" class="form-control" name="user" id="usergraph">
						<div class="submit-sec">
							<input id="done-btn" type="submit" value="Show Me" class="btn btn-primary">
						</div>
					</div>
				</form>
			</section>
-->
			<section class="showlinks"> 
                            <p>
                            <a href="/slides">See Slidedeck</a>
                            </p>
                            <p>
                            <a href="/slidesBackup">See SlidedeckBackup</a>
                            </p>
			</section>


		</div>
	</body>
</html>
